<template>
    <listTemplateVue :configList="configList">
        <template slot="filter" v-if="false">
            <div class="filter-wrap">
                <!-- <tag-select
                        title="方向"
                        :current="query.direction"
                        :data="directionArr"
                        @on-change="changeDirection"
                    ></tag-select>
                    <Divider style="margin:15px 0px" /> -->
                <tag-select
                    title="类型"
                    :current="query.typeCode"
                    ref="directionType"
                    :data="directionArr"
                    @on-change="changeType"
                ></tag-select>
                <Divider style="margin: 15px 0px" />
            </div>
        </template>
        <!-- 创建 / 修改 -->
        <EditModal ref="editModal" :type="type" :title="title" @ok="handleOk"></EditModal>
        <!-- 模板选择 -->
        <!-- <EnvironDesignModal ref="environDesignModal" @ok="search"></EnvironDesignModal> -->
    </listTemplateVue>
</template>
<script>
import listTemplateVue from '@/components/list-template/list-template.vue';
import EditModal from './edit.vue';
import TagSelect from '@/components/common/tagSelect/tagSelect';
import { mapGetters, mapState, mapMutations } from 'vuex';
import {
    queryContentList,
    delContent,
    checkContent,
    archiveContent,
} from '@/api/scientific/content.js';
import typeAndDirectionMixin from '@/mixin/typeAndDirectionMixin.js';
// import EnvironDesignModal from '../design/environDesign.vue';
import { typeRecordMixin } from '@/mixin/research';
export default {
    name: 'ResearchList',
    props: {
        type: {
            type: String,
            default: 'apply',
        },
        title: {
            type: String,
            default: '科研设计',
        },
    },
    components: { listTemplateVue, EditModal,TagSelect }, // TagSelect ,EnvironDesignModal
    mixins: [typeAndDirectionMixin, typeRecordMixin],
    data() {
        return {
            query: {
                direction: 'All',
                typeCode: 'All',
            },
            configList: {
                loading:false,
                title: () => {
                    return this.title;
                },
                query: {
                    pageIndex: 1,
                    pageSize: 10,
                },
                searchList: this.search,
                freshList: this.queryList, //分页
                queryForm: [
                    {
                        id: 'add',
                        type: 'button',
                        icon: 'ios-add',
                        text: `创建${this.title}`,
                        fn: this.showEditModal,
                        // show: () => {
                        //     // 单位管理员创建科研指派，单位设计师创建科研申请
                        //     return (
                        //         (!this.isRootDesigner && this.type == 'apply') ||
                        //         (this.isRootDesigner && this.type == 'assign')
                        //     );
                        // }
                    },
                    // {
                    //     id: 'creator',
                    //     type: 'checkbox',
                    //     text: '由我创建',
                        // show: () => {
                        //     return this.isRootDesigner && this.type === 'assign';
                        // },
                    // },
                    { id: 'name', type: 'input', placeholder: '请输入名称' },
                    // { id: 'creatorName', type: 'input', placeholder: '请输入申请人名称' },
                    // {
                    //     id: 'checkStatus',
                    //     type: 'select',
                    //     placeholder: '请选择审核状态',
                    //     optionData: [
                    //         { id: 0, label: '未审核' },
                    //         { id: 1, label: '审核通过' },
                    //     ],
                    // },
                    { id: 'fresh', type: 'button', icon: 'ios-refresh', fn: this.refreshList },
                ],
                dataListCol: [
                    {
                        title: '名称',
                        key: 'name',
                        placement: 'top-left',
                        width: 200,
                        tooltip: true,
                    },
                    // {
                    //     title: '指导老师',
                    //     key: 'inviterName'
                    //     // show: () => {
                    //     //     return this.type == 'apply';
                    //     // }
                    // },
                    // {
                    //     title: '审核人',
                    //     key: 'userName'
                    //     // show: () => {
                    //     //     return this.type == 'apply';
                    //     // }
                    // },
                    // {
                    //     title: '科研人员',
                    //     key: 'accepterName'
                    // },
                    // {
                    //     title: '审核状态',
                    //     key: 'checkStatus',
                    //     // show: () => {
                    //     //     return this.type == 'apply';
                    //     // },
                    //     render: (h, { row: { checkStatus } }) => {
                    //         return h('span', checkStatus ? '审核通过' : '未审核');
                    //     }
                    // },
                    // {
                    //     title: '归档状态',
                    //     key: 'status',
                    //     // show: () => {
                    //     //     return this.type == 'design';
                    //     // },
                    //     render: (h, { row: { status } }) => {
                    //         return h('span', status ? '已归档' : '未归档');
                    //     }
                    // },
                    // {
                    //     title: '方向',
                    //     key: 'direction',
                    //     render: (h, { row: { typeCode } }) => {
                    //         return h('span', this.handleDirection(typeCode));
                    //     }
                    // },
                    // {
                    //     title: '类型',
                    //     key: 'type',
                    //     render: (h, { row: { typeCode } }) => {
                    //         return h('span', this.handleCodeType(typeCode));
                    //     },
                    //     placement: 'top-left',
                    // },
                    {
                        title: '使用内置模板',
                        key: 'internal',
                        render: (h, { row: { internal } }) => {
                            return h('span',{
                                style:{
                                    color:internal ? 'var(--status-yes)' : 'var(--status-no)'
                                }
                            },internal ? '是' : '否');
                        },
                    },
                    {
                        title: '内置模板类型',
                        key: 'typeId',
                        filter: this.handleTypeRecord,
                        width: 100,
                        tooltip: true,
                    },
                    {
                        title: '模板名称',
                        key: 'tmplName',
                        width: 100,
                        tooltip: true,
                    },
                    // {
                    //     title: '代码名称',
                    //     key: 'codeName',
                    //     width: 100,
                    //     tooltip: true,
                    // },
                    // {
                    //     title: '分支名称',
                    //     key: 'codeBranchName',
                    //     width: 100,
                    //     tooltip: true,
                    // },
                    {
                        //title: '申请人',
                        title: '创建者',
                        key: 'creatorName',
                        width: 100,
                        tooltip: true,
                        // show: () => {
                        //     return this.type == 'apply';
                        // }
                    },
                    {
                        type:'html',
                        title: '描述',
                        key: 'description',
                        width: 300,
                        // tooltip: true,
                    },
                    // {
                    //     title: '审核时间',
                    //     key: 'checkTime'
                    //     // show: () => {
                    //     //     return this.type == 'apply';
                    //     // }
                    // },
                    // {
                    //     title: '指派时间',
                    //     key: 'createTime'
                    //     // show: () => {
                    //     //     return this.type == 'assign';
                    //     // }
                    // },
                    {
                        title: '操作',
                        placement: 'top-right',
                        action: true,
                        render: (h, params) => {
                            let disabled = this.userId != params.row.creator; //|| params.row.checkStatus === 1;
                            let disabledD = this.userId != params.row.creator;
                            let disabledDesign =
                                !params.row.projectId || this.userId != params.row.creator; // this.userId != params.row.accepter || params.row.status === 1;
                            let show = true;
                            // (this.isRootDesigner && this.type == 'assign') ||
                            // (!this.isRootDesigner && this.type == 'apply');
                            //  自己创建的未审批的才可以修改
                            return h('div', {}, [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'text',
                                            size: 'small',
                                            disabled: disabled,
                                        },
                                        attrs: {
                                            title: '修改',
                                        },
                                        class: {
                                            'non-border': true,
                                        },
                                        style: {
                                            //单位设计师的科研申请页面才有修改 && this.type == 'apply'
                                            // display: !this.isRootDesigner ? '' : 'none'
                                        },
                                        on: {
                                            click: () => {
                                                this.showEditModal(params.row);
                                            },
                                        },
                                    },
                                    [
                                        h('img', {
                                            attrs: {
                                                src: disabled
                                                    ? require('@/assets/mainImage/modifys.png')
                                                    : require('@/assets/mainImage/modifys-h.png'),
                                            },
                                        }),
                                    ]
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'text',
                                            size: 'small',
                                            disabled:
                                                params.row.projectId || disabled ? true : false,
                                        },
                                        attrs: {
                                            title: '模板选择',
                                        },
                                        class: {
                                            'non-border': true,
                                        },
                                        style: {
                                            display:'none'
                                            //单位设计师的科研申请页面才有修改 && this.type == 'apply'
                                            // display: !this.isRootDesigner ? '' : 'none'
                                        },
                                        on: {
                                            click: () => {
                                                this.showEnvironDesignModal(params.row);
                                            },
                                        },
                                    },
                                    [
                                        h('img', {
                                            attrs: {
                                                src:
                                                    params.row.projectId || disabled
                                                        ? require('@/assets/mainImage/zones.png')
                                                        : require('@/assets/mainImage/zones-h.png'),
                                            },
                                        }),
                                    ]
                                ),
                                h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            'ok-text': '确定',
                                            'cancel-text': '取消',
                                            type: 'error',
                                            size: 'large',
                                            title: '确定审核通过?',
                                            transfer: true,
                                        },
                                        style: {
                                            // 单位管理员的显示审核&& this.type === 'apply'
                                            display: 'none',
                                            // display: this.isRootDesigner ? '' : 'none'
                                        },
                                        on: {
                                            'on-ok': () => {
                                                checkContent(params.row.id).then(
                                                    ({ code, data, message }) => {
                                                        if (code === 1) {
                                                            this.search();
                                                            this.$Message.info('审核通过');
                                                        }
                                                    }
                                                );
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                props: {
                                                    type: 'text',
                                                    size: 'small',
                                                    disabled: params.row.checkStatus === 1,
                                                },
                                                attrs: {
                                                    title: '审核',
                                                },
                                                class: {
                                                    'non-border': true,
                                                },
                                            },
                                            [
                                                h('img', {
                                                    attrs: {
                                                        src:
                                                            params.row.checkStatus === 0
                                                                ? require('@/assets/mainImage/zones-h.png')
                                                                : require('@/assets/mainImage/zones.png'),
                                                    },
                                                }),
                                            ]
                                        ),
                                    ]
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'text',
                                            size: 'small',
                                            disabled: false //disabledDesign,
                                        },
                                        attrs: {
                                            title: '控制台',
                                        },
                                        class: {
                                            'non-border': true,
                                        },
                                        style: {
                                            // 单位设计师的设计页面显示设计&& this.type == 'design'
                                            // display: !this.isRootDesigner ? '' : 'none'
                                        },
                                        on: {
                                            click: () => {
                                                sessionStorage.setItem(`queryObj`, this.queryObj);
                                                this.$router.push({
                                                    name: 'design',
                                                    query: {
                                                        id: params.row.id,
                                                    },
                                                });
                                            },
                                        },
                                    },
                                    [
                                        h('Icon', {
                                            props: {
                                                type: 'md-checkbox-outline',
                                                size: 26,
                                            },
                                            style: {
                                                color:'rgb(56,56,211)'  
                                                // disabledDesign
                                                //     ? '#8f90a6'
                                                //     : 'rgb(56,56,211)',
                                            },
                                        }),
                                        // h('img', {
                                        //     attrs: {
                                        //         src: disabledDesign
                                        //             ? require('@/assets/mainImage/modifys.png')
                                        //             : require('@/assets/mainImage/modifys-h.png')
                                        //     }
                                        // })
                                    ]
                                ),
                                h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            'ok-text': '确定',
                                            'cancel-text': '取消',
                                            type: 'error',
                                            size: 'large',
                                            title: '确定归档?',
                                            transfer: true,
                                        },
                                        style: {
                                            // 单位设计师的设计页面显示归档&& this.type === 'design'
                                            display: !this.isRootDesigner ? 'none' : 'none',
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (!params.row.tmplId) {
                                                    this.$Message.error('请先保存科研');
                                                    return;
                                                }
                                                archiveContent(params.row.id).then(
                                                    ({ code, message }) => {
                                                        if (code === 1) {
                                                            this.$Message.info('归档成功');
                                                            this.queryList();
                                                        } else {
                                                            this.$Message.error(message);
                                                        }
                                                    }
                                                );
                                            },
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                props: {
                                                    type: 'text',
                                                    size: 'small',
                                                    disabled: disabledDesign,
                                                },
                                                attrs: {
                                                    title: '归档',
                                                },
                                                class: {
                                                    'non-border': true,
                                                },
                                            },
                                            [
                                                h('Icon', {
                                                    props: {
                                                        type: 'md-copy',
                                                        size: 26,
                                                    },
                                                    style: {
                                                        color: disabledDesign
                                                            ? '#8f90a6'
                                                            : 'rgb(56,56,211)',
                                                    },
                                                }),
                                                // h('img', {
                                                //     attrs: {
                                                //         src: !disabledDesign
                                                //             ? require('@/assets/mainImage/zones-h.png')
                                                //             : require('@/assets/mainImage/zones.png')
                                                //     }
                                                // })
                                            ]
                                        ),
                                    ]
                                ),
                                h(
                                    'Poptip',
                                    {
                                        props: {
                                            confirm: true,
                                            'ok-text': '确定',
                                            'cancel-text': '取消',
                                            type: 'error',
                                            size: 'large',
                                            title: '你确定要删除吗?',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                this.delItem(params.row);
                                            },
                                        },
                                        style: {
                                            // display: show ? '' : 'none'
                                        },
                                    },
                                    [
                                        h(
                                            'Button',
                                            {
                                                props: {
                                                    type: 'text',
                                                    size: 'small',
                                                    disabled: disabledD,
                                                },
                                                class: {
                                                    'non-border': true,
                                                },
                                                attrs: {
                                                    title: '删除',
                                                },
                                            },
                                            [
                                                h('img', {
                                                    attrs: {
                                                        src: disabledD
                                                            ? require('@/assets/mainImage/delNote-d.png')
                                                            : require('@/assets/mainImage/delNote-h.png'),
                                                    },
                                                }),
                                            ]
                                        ),
                                    ]
                                ),
                            ]);
                        },
                    },
                ],
                dataList: [],
                total: 0,
            },
        };
    },
    computed: {
        ...mapState('user', ['userId', 'isRootDesigner']),
        ...mapState('board', ['newNotice']),
        btnTxt() {
            let btnTxt = this.title; //this.isRootDesigner ? '科研指派' : '科研申请';
            return btnTxt;
        },
    },
    watch: {
        userId() {
            this.queryList();
        },
        btnTxt() {
            this.configList.queryForm[0].text = `创建${this.btnTxt}`;
        },
        newNotice(val, oldval) {
            if (val.content && val.content.indexOf('科研') != -1) {
                this.queryList();
            }
        },
    },
    mounted() {
        this.queryTypeRecordAll();
        this.configList.queryForm[0].text = `创建${this.btnTxt}`;
    },
    methods: {
        queryList() {
            this.$set(this.configList, 'loading', true);
            let query = { ...this.query, ...this.query };
            let typeCode = this.query.typeCode ? this.query.typeCode : this.query.direction;
            let params = {
                ...query,
                typeCode: typeCode === 'All' ? '' : typeCode,
                status: 0,
                creator: this.userId //this.query.creator ? this.userId : '',
            };
            this.queryObj = JSON.stringify({ ...query, page: this.$route.name });
            // if (!this.isRootDesigner && this.type === 'design') {
            //     params.accepter = this.userId;
            // }
            // if (!this.isRootDesigner && this.type === 'apply') {
            //     params.creator = this.userId;
            // }
            // if (!this.isRootDesigner && this.type === 'assign') {
            //     params.accepter = this.userId;
            // }
            queryContentList(params).then((res) => {
                if (res.code == 1) {
                    const data = res.data.items;
                    this.data = data;;
                    this.total = res.data.total;;
                }
            }).finally(() => {
                this.$set(this.configList, 'loading', false);
            });
        },
        changeDirection(type) {
            this.query.direction = type;
            this.filterTypeWithDirection(type);
            this.query.type = 'All';
            this.$refs.directionType && this.$refs.directionType.updateHeight();
            this.search();
        },
        changeType(type) {
            this.query.typeCode = type;
            this.search();
        },
        search() {
            this.queryList();
        },
        refreshList() {
            this.query = {
                direction: 'All',
                typeCode: 'All',
            };
            this.queryList();
        },
        handleOk(op) {
            op === 'add' ? this.refreshList() : this.search();
        },
        delItem(params) {
            delContent(params.id).then((res) => {
                if (res.code == 1) {
                    this.$Message.info('删除成功!');
                    this.queryList();
                } else {
                    this.$Message.error(res.message);
                }
            });
        },
        showEditModal(data) {
            this.$refs.editModal.showModal(data);
        },
        showEnvironDesignModal(data) {
            this.$refs.environDesignModal.openDesignModal(data);
        },
    },
    beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.filter-wrap {
    margin-top: 10px;
    font-size: 14px;
    color: #8f90a6;
}
</style>
